js异步实例之跨域获取图片 |
您所在的位置:网站首页 › fetch 跨域请求 › js异步实例之跨域获取图片 |
文章目录
前言问题描述解决问题获取图片异步渲染
结语
前言
我们知道js中有关异步编程的知识有很多,比如以Promise,await/async等系列的异步语法,以及XMLHttpRequest,fetch系列的js异步请求API。这篇博客我将以一个实际的应用案例来究竟如何使用异步编程来解决问题。(这里我不对这些异步语法以及异步API的使用作讲解,如果有对其不了解的读者可自行去mdn官方文档进行查阅学习。) 问题描述现在我需要使用js代码来获取网络上一跨域的图片资源,并且需要在指定的时机将其渲染到页面上。 图片资源以一个百度的图片为示例,其链接如下: https://www.baidu.com/img/dong_30a61f45c8d4634ca14da8829046271f.gif 效果图如下: 显然此问题分为两步,第一步为获取图片,第二步为异步渲染。 获取图片首先,我们最直接的想法就是通过fetch这个api来获取图片资源,然后不难写出下面代码: Document运行此代码并打开控制台,会查看到如下信息: 更新后的完整代码如下: Document同样,运行更新后的代码并查看控制台信息: 不难发现,虽然此次请求的状态码为200,但是其返回的response却如同虚设,几乎是个空壳response。最后,再挣扎一会,终于还是放弃这条道路,因为此路本就不通。(本质原因应该是出于浏览器本身的安全策略) 退回起点,换个思路想想,既然不支持直接通过js代码获取跨域网络图片,那我们为何不直接将其URL塞给原生的ImgDOM,代码如下: Document![]() 运行此代码,结果也不出意外,图片能够正确的显示在页面之中。 运行此代码,结果如下: 这一步将没有第一步那么麻烦,但是这一步的难点在于逻辑上的理解。 我们知道,不管是使用哪种方式,网络请求图片始终是异步操作,所以想要处理请求图片的结果,这就不得不使用异步请求的语法。(这里我使用promise) 结合异步语法的新版代码如下: Document function getPromise(url) { return new Promise((resolve, reject) => { const image = new Image(600, 200); image.onload = () => { resolve(image); }; image.onerror = () => { reject(); }; image.src = url; }) } function renderImage(image) { document.body.appendChild(image); console.log('成功渲染图片'); } function errorHandler() { console.log('获取图片失败'); } function getImage(url) { getPromise(url).then( (image) => { renderImage(image); }, () => { errorHandler(); }); console.log('我先行一步'); } getImage('https://www.baidu.com/img/dong_30a61f45c8d4634ca14da8829046271f.gif');页面显示效果如下: 本篇博客我以一个实际的应用场景为案例通过思路牵引的方式带领大家一步一步的来解决问题,相信大家也会发现,很多时候,感到困难的不是问题本身而是在于解决问题的思路。对于此篇博客内容有任何地方不理解的读者欢迎评论区留言,我看到后会给予积极回复。学习之路漫长且修远,贵在坚持,大家共同进步! |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |